<template>
  <el-menu
    :default-active="'/index'"
    router
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    background-color="#409EFF"
    text-color="#fff"
    active-text-color="#ffd04b"
    style="width:100%;position: fixed;top:0;left:0;">
    <el-row :gutter="5">
        <el-col :justify="start" :xs="24" :sm="22" :md="20" :lg="16" :xl="16">
          <el-container direction="horizontal">
            <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
              {{ item.navItem }}
            </el-menu-item>
          </el-container>
        </el-col>
        <el-col :xs="0" :sm="2" :md="4" :lg="8" :xl="8">
          <span style="position: absolute;right: 43%;font-size: 20px;font-weight: bold;color: aliceblue;margin-top: 12px"
          >耳朵终将遇到耳朵</span>
        </el-col>
    </el-row>
  </el-menu>
</template>

<script>
  export default {
    name: '',
    data() {
      return {
        navList: [
          {name: '/index', navItem: '首页'},
          {name: '/word', navItem: '说说'},
          {name: '/admin', navItem: '个人中心'}
        ]
      }
    }
  }
</script>

<style scoped>

</style>
